<template>
	<swiper v-if="data.length > 0" :options="options">
	    <swiper-slide v-for="(item, index) in data" :key="index" class="pb10rem">
    		<template v-if="item.goods_id">
    			<router-link :to="'/ordering/detail/presell-detail/' + item.goods_id + '?' + statusLink" v-if="statusLink=='status=2&ty=true'">
					<img :src="img_url + item[imgKey]+'?x-oss-process=image/resize,m_pad,'+wh" v-lazy="img_url + item[imgKey]+'?x-oss-process=image/resize,m_pad,'+wh" class="responsive-img">
    				<strong v-if="item.name" class="mt10 black fs30rem bold">{{item.name}}</strong>
    				<p v-if="item[timeType]" class="mt5 mb10 fs20rem c69">{{ item[timeType] * 1000,'MM月dd号hh:mm' | formatDate }}分开抢</p>
	    			<countdown :data="item.count_down" :type="countdownType" v-if="item.count_down" />
	    		</router-link>
    			<router-link :to="'/detail/experience-detail/' + item.goods_id + '?' + statusLink" v-else-if="img_url + item[imgLink]">
					<img :src="img_url + item[imgKey]+'?x-oss-process=image/resize,m_pad,'+wh" v-lazy="img_url + item[imgKey]+'?x-oss-process=image/resize,m_pad,'+wh" class="responsive-img">
    				<strong v-if="item.name" class="mt10 black fs30rem bold">{{item.name}}</strong>
    				<p v-if="item[timeType]" class="mt5 mb10 fs20rem c69">{{ item[timeType] * 1000,'MM月dd号hh:mm' | formatDate }}分开抢</p>
	    			<countdown :data="item.count_down" :type="countdownType" v-if="item.count_down" />
	    		</router-link>
	    		<img :src="img_url + item[imgKey]+'?x-oss-process=image/resize,m_pad,'+wh" v-lazy="img_url + item[imgKey]+'?x-oss-process=image/resize,m_pad,'+wh" class="responsive-img" v-else>
    		</template>
    		<template v-else-if="typeLink">
    			<template v-if="typeLink == 'aaa'">
    				<router-link :to="'/detail/experience-detail/' + item[imgLink]+ '?status=2'">
		    			<img :src="img_url + item[imgKey]+'?x-oss-process=image/resize,m_pad,'+wh" v-lazy="img_url + item[imgKey]+'?x-oss-process=image/resize,m_pad,'+wh" class="responsive-img">
	    			</router-link>
    			</template>
				<template v-if="typeLink == 'ordering'">
    				<router-link :to="'/ordering/detail/commodity-detail/' + item[imgLink]">
		    			<img :src="img_url + item[imgKey]+'?x-oss-process=image/resize,m_pad,'+wh" v-lazy="img_url + item[imgKey]+'?x-oss-process=image/resize,m_pad,'+wh" class="responsive-img">
	    			</router-link>
    			</template>
    			<template v-if="typeLink == 'mall'">
    				<router-link :to="'/mall/mall-detail/' + item[imgLink]">
		    			<img :src="img_url + item[imgKey]+'?x-oss-process=image/resize,m_pad,'+wh" v-lazy="img_url + item[imgKey]+'?x-oss-process=image/resize,m_pad,'+wh" class="responsive-img">
	    			</router-link>
    			</template>
    		</template>
    		<template v-else>
    			<img :src="img_url + item[imgKey]+'?x-oss-process=image/resize,m_pad,'+wh" v-lazy="img_url + item[imgKey]+'?x-oss-process=image/resize,m_pad,'+wh" class="responsive-img">
    		</template>
	    </swiper-slide>
	    <div class="swiper-pagination" slot="pagination"></div>
	</swiper>
</template>

<script>
	import 'swiper/dist/css/swiper.css';
	import { swiper, swiperSlide } from 'vue-awesome-swiper';
	import Countdown from '@/components/Countdown';
	import { formatDate } from '@/utils'
	import { Lazyload } from 'mint-ui';
	import Vue from "vue";
    Vue.use(Lazyload);
	export default {
		name:'Swiper',
		components: {
			swiper,
    		swiperSlide,
    		Countdown,
		},
		data()
		{
			return {
				img_url       : process.env.IMG_URL,
				countdownType : true,
			}
		},
		filters: {
			formatDate(time,fmt){
				let date = new Date(time);
				return formatDate(date,fmt)
			}
	  	},
		props: {
			data: {
				type: Array,
				required: true,
			},
			imgKey: {
				type: String,
				default: 'img'
			},
			timeType:{
				type:String
			},
			imgLink:{
				type:String,
				default:'url'
			},
			statusLink:{
				type:String
			},
			typeLink:{
				type:String
			},
            wh:{
                type:String,
				default:'h_380'
            },
			options: {
				type: Object,
				default ()
				{
					return {
						
					}
				}
			}
		}
	}
</script>


